<template>
  <!-- 用户抗位置泄露-大屏 -->

  <el-container ref="bigModel" class="main-model">
    <el-header>
      <Header :active-title="3" />
    </el-header>
    <el-main>

      <b-map
        class="testMap"
        v-if="center"
        :height="'-webkit-fill-available'"
        :width="'100%'"
        ref="mapmarkInfoRef"
        :center="center"
        @markerClick="markerHandle"
      >
      </b-map>

      <userinfo :info="userDetail" />
      <markerInfo1
        :initData="markerInfoData"
        v-show="markerInfoShow"
        @closeFn="closeFn"
      ></markerInfo1>
      <!--      右侧部分-->
      <img
        v-show="rightModelShow"
        :src="require('@/assets/xd/new/Group 1142813242.png')"
        alt=""
        class="hiddenClass"
        @click="hideRightModel"
      />
      <img
        v-show="!rightModelShow"
        :src="require('@/assets/xd/new/Group 1142813263.png')"
        alt=""
        class="showClass"
        @click="showRightModel"
      />
      <div v-show="rightModelShow" class="home-model-right">
        <div class="infoModel">
          <div class="infoTitle flex-container">
            用户位置泄露风险统计
            <el-button type="text" @click="toalarmInformation" class="more">
              更多
            </el-button>
          </div>
          <div class="infoContent" :style="{ height: infoHeight + 'px' }">
            <barchart />
          </div>
        </div>

        <div class="infoModel">
          <div class="infoTitle flex-container">
            用户位置泄露风险告警
            <!-- 跳转终端页面 -->
            <el-button type="text" @click="toalarmInformation" class="more">
              更多
            </el-button>
          </div>
          <div class="infoContent" :style="{ height: infoHeight + 'px' }">
            <list-scroll class="box" :speed="0">
              <div class="list">
                <div
                  class="infoItem1"
                  v-for="(item, index) in infoList"
                  :key="index"
                  @click="clickalarm(item)"
                >
                  <div class="_num">
                    {{ index + 1 }}
                  </div>
                  <div class="_cont">
                    {{ item.username }}---{{ item.locationPos }}
                  </div>
                </div>
              </div>
            </list-scroll>
          </div>
        </div>

        <div class="infoModel">
          <div class="infoTitle flex-container">
            用户抗定位任务列表
            <!-- 跳转终端页面 -->
            <el-button type="text" @click="toantiLocalization" class="more">
              更多
            </el-button>
          </div>
          <div class="infoContent" :style="{ height: infoHeight + 'px' }">
            <list-scroll class="box" :speed="0">
              <div class="list">
                <div
                  class="infoItem2"
                  v-for="(item, index) in infoList2"
                  :key="index"
                  @click="clickanti(item)"
                >
                  <div class="_num">
                    {{ index + 1 }}
                  </div>
                  <div class="_cont">
                    {{ item.method }}---{{ item.state }}---{{
                      item.targetLocation
                    }}
                  </div>
                </div>
              </div>
            </list-scroll>
          </div>
        </div>
      </div>
    </el-main>
  </el-container>
</template>

<script>
import { detailsInfo, listWarn } from "@/api/combatUser/alarmInformation";
import { detailsUserId, listUser } from "@/api/combatUser/importantUser";

import { listTask } from "@/api/combatUser/antiLocalization";
import testMap from "./components/amap.vue";

import userinfo from "./components/userInformation.vue";
import barchart from "./components/3DColumnChart2.vue";
import markerInfo1 from "./components/markerInfo1.vue";

import Header from "@/views/largeScreen/components/header/index.vue";

import ListScroll from "@/components/DtSrcollCopy2";
import BMap from "./components/bmap.vue";

export default {
  components: {
    testMap,
    Header,
    ListScroll,
    barchart,
    userinfo,
    markerInfo1,
    BMap,
  },
  data() {
    return {
      id: "",
      userInfoData: {}, //用户信息
      otherInfo: {}, //用户的其他经纬信息
      markerInfoData: {}, //标记点信息
      markerInfoShow: false, //标记点信息是否显示

      rightModelShow: true,
      rightModelSpan: 5,
      leftModelSpan: 19,
      activeIndex: "1",
      activeIndex2: "1",
      formInline: {
        user: "",
        region: "",
      },
      infoList: [],
      infoList2: [],
      infoHeight: 300,
      scrollTop: 0,
      userDetail: null,
      center: null,
      userid:'',
    };
  },
  async mounted() {
    this.infoHeight = (this.$refs.bigModel.$el.offsetHeight - 80) / 3;
    //从请求的地址中获取id
    this.id = this.$route.query.id;
    this.userid = this.$route.query.userid;
    //通过ID获取用户信息
    let res = await detailsInfo(this.id);
    if (res.code == 200) {
      this.userInfoData = res.data;
    }
    console.log(this.userInfoData);
    
    //通过id调用另一个接口获取原来的位置信息
    let res2 = await detailsUserId(this.userid);
    if (res2.code == 200) {
      this.otherInfo = res2.data;
    }
    // 获取左侧卡片用户信息
    let res3 = await listUser({
      pageNum: 1,
      pageSize: 30,
      userId: this.otherInfo.userId,
    });
    if (res3.code == 200) {
      this.userDetail = res3.rows[0];
    }
    //获取所有的告警列表
    let listWarnRes = await listWarn({ pageNum: 1, pageSize: 30 });
    if (listWarnRes.code == 200) {
      this.infoList = listWarnRes.rows;
    }

    //用户抗定位任务列表
    let listWarnRes2 = await listTask({ pageNum: 1, pageSize: 30 });
    if (listWarnRes2.code == 200) {
      this.infoList2 = listWarnRes2.rows;
    }
    let { userWorkLat, userWorkLon, userHomeLat, userHomeLon } = this.otherInfo;
    let { locationLat, locationLon } = this.userInfoData;
    debugger;
    console.log(
      "locationLat,locationLonlocationLat,locationLonlocationLat,locationLon",
      locationLat,
      locationLon
    );
    this.center = { lng: locationLon, lat: locationLat };
    let todata = {
      name: "定位地址",
      ...this.userInfoData,
      useredId:this.otherInfo.id,
    };
    this.$nextTick(() => {
      this.$refs.mapmarkInfoRef.setData({
        points: [
         
          {
            lng: userHomeLon,
            lat: userHomeLat,
            color: "blue",
            params: { name: "家庭地址", ...this.userInfoData,radius:30000,radiusFlag:true },
          },
          {
            lng: userWorkLon,
            lat: userWorkLat,
            color: "yellow",
            params: { name: "工作地址",radius:30000,radiusFlag:true },
          },
          
          {
            lng: locationLon,
            lat: locationLat,
            color: "red",
            params: { name: "定位地址", ...todata,useredId:this.otherInfo.id },
          },
        ],
      });
    });
 
  },
  methods: {
    closeFn() {
      this.markerInfoShow = false;
    },
    markerHandle(data) {
      console.log("地图返回的数据", data);
      // 去掉家庭地址工作地址点击事件
      // if (data.params.name != '家庭地址' && data.params.name != '工作地址') {
      this.markerInfoData = data;
      this.markerInfoShow = true;
      // }
    },
    toantiLocalization() {
      this.$router.push("/networkUser/antiLocalization");
    },
    toalarmInformation() {
      this.$router.push("/networkUser/alarmInformation");
    },
    hideRightModel() {
      this.rightModelShow = false;
    },
    showRightModel() {
      this.rightModelShow = true;
    },

    onSubmit() {},
    // 点击用户位置列表
    async clickalarm(row) {
      // this.$router.push('/userPositioningScreen/details?id=' + row.id)
      console.log("清空地图");
      this.$refs.mapmarkInfoRef.clearOverlays();
      //通过ID获取用户信息
      let res = await detailsInfo(row.id);
      if (res.code == 200) {
        this.userInfoData = res.data;
      }

      //通过id调用另一个接口获取原来的位置信息
      let res2 = await detailsUserId(row.userid);
      if (res2.code == 200) {
        this.otherInfo = res2.data;
      }
      // 获取左侧卡片用户信息
      let res3 = await listUser({
        pageNum: 1,
        pageSize: 30,
        userId: this.otherInfo.userId,
      });
      if (res3.code == 200) {
        this.userDetail = res3.rows[0];
      }
      //获取所有的告警列表
      let listWarnRes = await listWarn({ pageNum: 1, pageSize: 30 });
      if (listWarnRes.code == 200) {
        this.infoList = listWarnRes.rows;
      }

      //用户抗定位任务列表
      let listWarnRes2 = await listTask({ pageNum: 1, pageSize: 30 });
      if (listWarnRes2.code == 200) {
        this.infoList2 = listWarnRes2.rows;
      }
      let { userWorkLat, userWorkLon, userHomeLat, userHomeLon } =
        this.otherInfo;
      let { locationLat, locationLon } = this.userInfoData;
      debugger;
      console.log(
        "locationLat,locationLonlocationLat,locationLonlocationLat,locationLon",
        locationLat,
        locationLon
      );
      this.center = { lng: locationLon, lat: locationLat };
      this.$nextTick(() => {
        this.$refs.mapmarkInfoRef.setData({
          points: [
          {
              lng: locationLon,
              lat: locationLat,
              color: "red",
              params: { name: "定位地址", ...this.userInfoData,useredId:this.otherInfo.id },
            },
            {
              lng: userHomeLon,
              lat: userHomeLat,
              color: "blue",
              params: { name: "家庭地址", ...this.userInfoData,radius:30000,radiusFlag:true },
            },
            {
              lng: userWorkLon,
              lat: userWorkLat,
              color: "yellow",
              params: { name: "工作地址",radius:30000,radiusFlag:true },
            },
           
          ],
        });
      });
    },
    // 点击用户定位列表
    clickanti(row) {
      this.$router
        .push({
          path:
            "/userPositioningScreen/compare?id=" +
            row.id +
            "&warnid=" +
            row.warnid,
        })
        ;
    },
  },
};
</script>
<style lang="scss" scoped>
.home-model-right {
  width: 400px;
  position: absolute;
  right: 10px;
  z-index: 100;

  .infoContent {
    padding-top: 48px;
    box-sizing: border-box;
    overflow: hidden;
  }

  .infoModel {
    position: relative;

    .infoTitle {
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      background-image: url(~@/assets/xd/new/title.png);
      background-size: 100% 80%;
      background-repeat: no-repeat;
      color: #fff;
    }

    .infoBody {
      height: 100%;
      padding-top: 48px;
      box-sizing: border-box;
    }
  }
}

.home-model-left {
  position: relative;
  height: 100%;
}

.home-model {
  position: relative;
  width: 100%;
  height: 100%;
}

.body {
  font-size: 18px;
  position: absolute;
  top: 60px;
  right: 10px;
  padding: 8px;
  color: #90cee9;
}

.bg {
  position: absolute;
  top: 0;
  left: 0;
  padding: 30px;
  width: 100%;
  height: 100%;
  background-image: url("~@/assets/xd/dialogbg.png");
  background-repeat: no-repeat;
  background-size: 100% 100%;
  z-index: 10000;
}

.Dialog1 {
  position: absolute;
  left: 100px;
  top: 200px;
  width: 420px;
  height: 250px;
}

.title {
  font-family: PingFang SC, PingFang SC;
  font-weight: 400;
  font-size: 22px;
  color: #ffffff;
  line-height: 1px;
  text-align: left;
  font-style: normal;
  text-align: center;
  font-weight: bold;
}

.Tc {
  position: absolute;
  bottom: 10px;
  right: 30px;
  width: 400px;
  height: 300px;
}

.flex-container {
  display: flex;
  justify-content: space-between;
}

.scroll-div {
  margin-top: 10px;
  overflow: hidden;
  animation: scroll 1s linear infinite;
}

.infoItem {
  line-height: 1.3em !important;
  font-size: 18px;
}

.home-model-right .infoModel .infoTitle {
  z-index: 1;
}

.infoList {
  position: relative;
  height: 100%;
  overflow: hidden;
}

.scroll-div {
  position: absolute;
  width: 100%;
  bottom: -1px;
  margin-top: 10px;
  overflow: hidden;
  border-top-left-radius: 30px;
}

.el-header {
  padding: 0;
  z-index: 5;
}

.more {
  color: #fff;
  font-size: 22px;
  font-weight: bold;
}

.zindexModel {
  position: absolute;
  background-color: #153968a6;

  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 1;
}

.testMap {
  width: 100%;
  height: 100%;
  position: absolute;
  z-index: 4;
}

.hiddenClass {
  height: 100%;
  position: absolute;
  right: 400px;
  top: 50%;
  -webkit-transform: translate(0, -50%);
  transform: translate(0, -50%);
  cursor: pointer;
  z-index: 100;
}

.showClass {
  height: 100%;
  position: absolute;
  right: 0;
  top: 50%;
  -webkit-transform: translate(0, -50%);
  transform: translate(0, -50%);
  cursor: pointer;
  z-index: 100;
}

::v-deep .tc {
  right: 30%;
}
</style>
